


.add-player { 
  border: 4px solid #ccc;
  border-width: 0 0 4px;
  input[type=text]{ 
    position: relative; 
    top: 5px;
    border: none;
  }
}

.new-tournament{
	margin: 0 auto;
	.btn{
		display: block;
		margin: 100px auto 0;
    @media screen and (max-width: $break3 ){
      margin: 20px auto;
    }
	}
  input[type=text] { 
    font-size: 10em;
    color: #ddd;
  }
}

.player-list { 
  margin: 0;
  padding: 0;
  > li{
    @include inline-block;
    a{
       display: block;
       color: #fff;
       font-size: 1em;
       padding: 16px 50px 10px 75px;
       min-height: 45px;
       margin: 0 3% 4%;
       background: #444;
       position: relative;
       @include box-sizing( border-box );
       @include border-radius( 5px );
       @include opacity( 0.5 );
       @include transition( opacity, 0.4s );
       &:hover{
         @include opacity( 1 );
         text-decoration: none;
       }
       &.selected{
        @include opacity( 1 );
        background: #298b84;
       }
       &:active{
        left: 1px;
        top: 1px;
       }
       img{
        max-width: 50px;
        max-height: 50px;
        margin: 0;
        position: absolute;
        left: 10px;
        top: 10px;
       }
    }
    
  }
  @media screen and (max-width: $break3 ){
    > li{
      a{
        padding: 14px 50px 5px 60px;
        min-height: 35px;
        img{
          max-width: 35px;
          max-height: 35px;
        }
      } 
    }
  }
  @media screen and (max-width: $break4 ){
    text-align: left;
    > li{
      width: 50%;  
      a{
        min-height: 24px;
        padding: 5px 10px 5px 38px;
        img{
          left: 5px;
          top: 5px;
          max-width: 25px;
          max-height: 25px;
        }
      } 
    }
  }
  @media screen and (max-width: $break5 ){
    > li{
      width: auto;  
      display: block;
      a{
        margin: 0 0 3px;
      }
    }
  }
}






#knockout{ 
  width: 10px; 
  height: 10px; 
  font-size: 30px; 
  position: absolute; top: 50%; left: 50%; 
}

.stage{ 
  width: 10%; 
  display: inline-block;
  height: 20px;
  position: absolute;
  border: 4px solid #747474;
  border-width: 4px 4px 4px 0;
  &.stage-a{ 
    border-width: 0; 
    background: url(../img/final-bg.png) no-repeat -126px 0;
    &.position-1{ background-position: 126px 0; }
    .player{
      width: 50%;
      left: 0;
      top: 0;
      bottom: auto;
      &.position-1{ left: auto; right: 0; }
      .score{
        top: auto;
        bottom: -64%;
      }
    }
  }
  &.stage-b.position-1,
  &.stage-c.position-2,
  &.stage-c.position-3{ border-width: 4px 0 4px 4px; }
  &.on .player,
  .player.waiting{ color: #fff; font-size: 2.2em; }
  &.on.completed-game .player{ font-size: 1em; color: #747474; }
  &.active-game .player{ 
    .score{ display: block; }
  }
 }


.player{
  position: absolute;
  text-transform: uppercase;
  color: #747474;
  font-size: 2em;
  width: 100%;
  letter-spacing: -1.2px;
  text-align: center;
  cursor: pointer;
  outline: none;
  &.a{ top: 0; margin-top: -38px; }
  &.b{ bottom: 0; margin-bottom: -47px; }
  .score{
    position: absolute; bottom: -64%; left: 0;
    width: 100%;
    line-height: 1em;
    display: none;
  }
  &.b{
    .score{
      bottom: auto;
      top: -64%;
    }
  }
  .name{
    display: inline-block;
    padding: 0 7px;
    background: #383838;
  }
}

.match-link{
  display: block;
  background: transparent;
  border: 20px solid transparent;
  display: block;
  height: 100%;
  margin: -20px;
  width: 100%;
  &:hover{
    background: rgba( #f3f3f3, 0.05);
  }
}

.match{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  .player{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    margin: 0;
    font-size: 8em;
    letter-spacing: -0.05em;
    &.a{
      left: 0;
    }
    &.b{
      right: 0;
    }
    .name,
    .score{
      position: absolute;
      left: 0;
      width: 100%;
      padding: 0;
    }
    .name{
      bottom: 50%; 
    }
    .score{
      display: block;
      top: 50%; 
      font-size: 1.5em;
      font-weight: bold;
      color: #fff;
      text-indent: -0.12em;
      letter-spacing: -0.12em;
    }
  }
}


@media all and (max-width: 1200px){
  .stage{
    &.on .player{ font-size: 1.5em; }
  }

}




@media all and (max-width: 700px){
  .stage{
    &.on .player{ font-size: 1.2em; }
  }

}